<template>
  <el-card>
    <FilterBox :column="column" :data-obj.sync="listQuery" @search="fetchData" />
    <el-row class="mt10 mb10">
      <el-button type="primary" @click="toAdd" v-if="listQuery.pid" >新增</el-button>
    </el-row>
    <Table :field-list="fieldList" :data="list">
      <template v-slot:set="{ row }">
        <el-button type="text" @click="toEdit(row)">编辑</el-button>
        <el-button class="color-red" type="text" @click="delHandler(row)">删除</el-button>
      </template>
    </Table>
    <Pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNumber"
      :limit.sync="listQuery.pageSize" @pagination="fetchData" />
  </el-card>
</template>

<script>
import { getCateList, getPageList, delCate, postCate, addCate } from '@/api/index'
import FilterBox from '@/components/FilterBox/index.vue'
import Table from '@/components/Table/index.vue'
import Pagination from '@/components/Pagination/index.vue'
import dayjs from 'dayjs'
export default {
  name: 'Pages',
  components: { FilterBox, Table, Pagination },
  data() {
    return {
      currentRole: 'adminDashboard',
      listQuery: {
        pageNumber: 1,
        pageSize: 100,
        total: 0,
        pid: null
      },
      column: [
        {
          type: 'select',
          label: '类型',
          fieldName: 'pid',
          list: () => [
            {
              label: '网站页面', value: '14'
            },
            {
              label: '下载中心', value: '15'
            },
            {
              label: '媒体库', value: '16'
            },
            {
              label: '新闻管理', value: '17'
            }
          ]
        }
      ],
      fieldList: [
        { label: '操作', prop: 'set', type: 'slot', slotName: 'set', width: '160' },
        { label: '标题', prop: 'name', minWidth: '120' },
         { label: '父类目id', prop: 'pid', minWidth: '120' },
        { label: '类目id', prop: 'id', minWidth: '120' },
        { label: '更新时间', prop: 'updatetime_text', width: '170' }
      ],
      list: []
    }
  },
  async created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await getCateList(this.listQuery)
      res.data.forEach(v => {
        v.updatetime_text = dayjs(v.updatetime * 1000).format('YYYY-MM-DD HH:mm:ss')
      })
      this.list = res?.data || []
      // this.listQuery.total = res.data.total
    },
    toAdd() {
      this.$prompt("请输入类型名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async ({ value }) => {
        if(!value) return
        await addCate({ pid: this.listQuery.pid, name: value });
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.fetchData();
      });
    },
    toEdit(row) {
      this.$prompt("请输入类型名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: row.name
      }).then(async ({ value }) => {
        if (!value) return
        await postCate({ pid: row.pid, name: value, id: row.id });
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.fetchData();
      });
    },
    async delHandler({ id }) {
      if (!id) return
      await this.$confirm('确认要删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delCate({ id })
      this.$message.success('删除成功')
      this.fetchData()
    }
  }
}
</script>
